<!--
//
// GJwdInput.vue
// hs-admin
//
// Created by 区区电脑 on 2023/11/23.
//
-->
<template>
    <div class="GJwdInput">
        <el-input-number v-model="lng" placeholder="例:103.777" :controls="false" style="flex: 1" @change="computValue"/>
        <span style="padding: 0 4px">,</span>
        <el-input-number v-model="lat" placeholder="例:35.666" :controls="false" style="flex: 1" @change="computValue"/>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";

const props = defineProps({
    modelValue: {
        type: String,
        default: () => ""
    }
});
const emits = defineEmits(["update:modelValue"]);

const lng = ref(null)
const lat = ref(null)

function computValue() {
    if (lng.value && lat.value) {
        const value = `${lng.value},${lat.value}`
        emits("update:modelValue", value)
    }
}


function setValue() {
    if (props.modelValue) {
        // 桩号以: lng,lat 形式
        lng.value = parseFloat(props.modelValue.split(",")[0])
        lat.value = parseFloat(props.modelValue.split(",")[1])
    }
}

watch(() => props.modelValue, () => {
    setValue()
})

onMounted(() => {
    setValue()
})
</script>

<style scoped lang="scss">
.GJwdInput {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
</style>
